<template>
  <Transition name="fade">
    <div v-if="modelValue" class="kon-message-mini">
      {{ content }}
    </div>
  </Transition>
</template>

<script lang="ts" setup>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
    content?: string;
    displayTime?: number;
  }>(),
  {
    modelValue: false,
    content: "",
    displayTime: 3000
  }
);
</script>

<style lang="less" scoped>
.kon-message-mini {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 42px;
  font-size: 13px;
  line-height: 18px;
  color: @text-white-0;
  border-radius: 4px;
  background-color: @bg-black-1;
  z-index: 2001;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  top: 48%;
}
</style>
